<template>
  <li class="comment-item">
    <div class="comment-container clearfix">
      <div class="comment-head-img">
        <img :src="value.avatar"/>
      </div>
      <div class="comment-content">
        <div class="comment-rate">
          <span>评分：
            <span style="display:inline-block;vertical-align:middle;">
              <el-rate
                v-model="value.star"
                disabled
                show-text
                text-color="#ff9900"
                text-template="{value}">
              </el-rate>
            </span>
            <span class="rate-text">
              <span>描述相符：{{value.desc}}</span>
              <span>教学态度：{{value.attitude}}</span>
              <span>课程质量：{{value.quality}}</span>
            </span>
          </span>
          <span class="time">//2017-3-12</span>
        </div>
        <div class="comment-text">
          {{value.content}}
        </div>
      </div>
    </div>
  </li>
</template>

<script>
import uimg from '@/assets/mock_images/user.jpg'
export default {

  name: 'commentsItem',

  data() {
    return {
      uimg
    }
  },
  props: {
    value: {
      type: Object,
      default() {
        return {/*  */}
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .comment-item {
    width: 1200px;
    margin: 0 auto;
    border-bottom: 1px solid #e5e6e7;
    padding: 30px 0;
    .comment-container{
      .comment-head-img{
        float: left;
        width: 42px;
        height: 42px;
        border-radius: 21px;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .comment-content{
        float: left;
        margin-left: 18px;
        width: 1140px;
        .comment-rate{
          color: #666;
          .time{
            color: #999;
            float: right;
          }
          .rate-text{
            >span{
              margin: 0 20px;
            }
          }
        }
        .comment-text{

        }
      }
    }
  }
</style>